<template>
  <!-- 树形表格 -->
  <!-- 
        default-expand-all 是否默认展开所有节点 false默认不展开
        expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点
        show-checkbox 是否显示节点的复选框 默认false
        node-key="catId" 树节点的数据属性， 默认为 id
        default-expanded-keys 默认展开的节点的 key 的数组 设置需要默认展开的节点
        draggable 是否开启拖拽
        allow-drag 判断节点能否被拖拽 如果返回 false ，节点不能被拖动
        allow-drop 函数(draggingNode, dropNode, AllowDropType)，三个参数，当前正在拖动的节点，目标节点，第三个参数为放置位置('prev'、'inner' 和 'next')
        @node-drop 节点被拖拽成功时调用
        -->
  <el-tree
    ref="categoryTree"
    v-loading="loading"
    style="max-width: 1000px"
    :data="treeData"
    node-key="catId"
    :props="props"
    :default-expand-all="false"
    :expand-on-click-node="true"
    :default-expanded-keys="expandedKeys"
    @node-click="nodeClick"
  >
    <template #default="{ node }">
      <div class="custom-tree-node">
        <!-- 节点名称 -->
        <span>{{ node.label }}</span>
      </div>
    </template>
  </el-tree>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { categoryList } from '@/api/category.js'
// 树形组件实例
const categoryTree = ref(null)
//树形数据
const treeData = ref([])
//默认展开的节点的 key 的数组
const expandedKeys = ref([])
// 树形组件绑定的key的名称
const props = {
  label: 'name',
  children: 'children'
}
//加载状态
const loading = ref(false)
/**
 * 组件挂载完成即可调用
 */
onMounted(() => {
  getCategoryList()
})

/**
 * 异步请求调用后台服务
 */
const getCategoryList = async () => {
  loading.value = true
  treeData.value = await categoryList()
  loading.value = false
}
//生命一个事件
const emit = defineEmits(['treeNodeClick'])
/**
 * 树形组件节点被点击之后触发的方法
 * @param data
 * @param node
 * @param component
 */
const nodeClick = data => {
  // console.log('点击了节点')
  // console.log(data)
  //子组件给父组件传递数据
  emit('treeNodeClick', data)
}
</script>
